<template>
  <div class="index-page">
    <!-- 顶部轮播图和搜索栏 -->
    <div class="top-banner">
      <u-swiper
        :list="bannerList"
        height="360"
        indicator
        indicatorMode="dot"
        autoplay
        circular
        imgMode="aspectFill"
        class="banner-swiper"
      ></u-swiper>
    </div>

<!--    <div class="search-bar">-->
<!--      <u-icon name="search" size="22" color="#999" style="margin-right:8px;" />-->
<!--      <input type="text" placeholder="搜索景区/酒店/产品名称" />-->
<!--    </div>-->
    <!-- 功能入口 -->
    <div class="feature-entry">
      <div class="entry-item ticket" @click="toShop">
        <div class="entry-title">买门票</div>
        <div class="entry-desc">一段描述</div>
      </div>
      <div class="entry-item traffic" @click="toLine">
        <div class="entry-title">选线路</div>
        <div class="entry-desc">一段描述</div>
      </div>
    </div>

    <!-- 热门景区 -->
    <div class="hot-title">热门景区</div>
    <div class="hot-scenic">
      <div class="scenic-card" v-for="item in shopList" @click="toShopDetail(item.id)">
        <image class="scenic-cover" :src="item.cover" />
        <div class="scenic-name">{{ item.name }}</div>
      </div>
    </div>
    <u-empty style="margin-top: 50rpx" v-if="shopList.length == 0" text="暂无数据" mode="data"></u-empty>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      bannerList: [
      ],
      shopList: []
    }
  },

  computed: {
    ...mapGetters(['userInfo'])
  },
  onLoad({ user_id }) {
    this.$api.getBannerList().then(res => {
      this.bannerList = res.map(item => {
         return {
           ...item,
           image: item.image_url
         }
      })
    })

    this.$api.getTicketShopList({ is_recommended: 1 }).then(res => {
      this.shopList = res
    })
    let parentUserId = user_id || 0
    if (this.userInfo.id && parentUserId && this.userInfo.parent_user_id !== parentUserId) {
      this.$api.updateUser(this.userInfo.id, { parent_user_id: parentUserId })
    }
    if (parentUserId) {
      uni.setStorageSync('parentUserId', parentUserId)
    }
  },
  methods: {
    toShop() {
      uni.navigateTo({
        url: `/pages/ticket/shop`
      })
    },
    toLine() {
      uni.navigateTo({
        url: `/pages/ticket/line`
      })
    },
    toShopDetail(id) {
      uni.navigateTo({
        url: `/pages/ticket/detail?shopId=${id}`
      })
    }
  }
};
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.index-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f7f7f7;
  .top-banner {
    position: relative;
    .banner-swiper {
      width: 100%;
      height: 180px;
    }
  }
  .search-bar {
    width: 80%;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.9);
    border-radius: 20px;
    padding: 8px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin: 0 auto;
    input {
      border: none;
      outline: none;
      background: transparent;
      flex: 1;
      font-size: 16px;
      color: #333;
    }
  }

  .feature-entry {
    display: flex;
    justify-content: space-between;
    margin: 20px 16px 0 16px;
    .entry-item {
      flex: 1;
      margin: 0 8px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      padding: 20px 0 20px 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .entry-title {
        font-size: 22px;
        font-weight: bold;
        color: #fff;
        margin-bottom: 8px;
      }
      .entry-desc {
        font-size: 14px;
        color: #fff;
      }
    }
    .ticket {
      background: linear-gradient(135deg, #4e8ef7 0%, #6fc3ff 100%);
    }
    .traffic {
      background: linear-gradient(135deg, #3ec6e0 0%, #6fe7c1 100%);
    }
  }
  .hot-title {
    font-size: 22px;
    font-weight: bold;
    margin: 28px 0 12px 20px;
    color: #222;
  }
  .hot-scenic {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 16px;
    .scenic-card {
      width: 48%;
      margin-bottom: 16px;
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      .scenic-cover {
        width: 100%;
        height: 100px;
        object-fit: cover;
      }
      .scenic-name {
        position: absolute;
        left: 16px;
        bottom: 16px;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        text-shadow: 0 2px 8px rgba(0,0,0,0.3);
      }
    }
  }
}
</style>
